<template>
  <h1>组合API-watch函数</h1>
  <h2>{{ number }}</h2>
  <button @click="addFn">点我</button>
</template>

<script>
import { ref, watch } from 'vue'
/* 
 目标：组合API-watch函数
*/
export default {
  name: 'App',
  setup() {
     const number = ref(0)
    const addFn = () => {
      number.value++
    }

     // 监听 number 变量，如果有发生变化，自动运行后面的回调函数
    watch(number, (newVal, oldVal) => {
      console.log({ newVal, oldVal })
    })

    return { number, addFn }
  },
   // Vue2 写法回顾
  // watch: {
  //   number(newVal, oldVal) {
  //     console.log({ newVal, oldVal })
}
</script>